import { DatePicker, Button } from 'antd'
import React, { useState, useRef} from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, Link } from 'umi'
import {
  employeeStatusList,
  employeeTypeList,
  genderList,
  InsuredStatusList,
  securityOperationType
} from '@/utils/constant'
import { getMemberChange } from '../service'
import moment from 'moment';

const { RangePicker } = DatePicker;

const TableList = () => {
  const actionRef = useRef();
  const formRef = useRef();
  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      /*render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),*/
    },
    {
      title: '性别',
      align: 'center',
      dataIndex: 'gender',
      render: (text) => {
        const res = genderList.find((item) => item.value === text.toString());
        return res ? res.label : text
      },
      hideInSearch: true,
    },
    {
      title: '身份证',
      align: 'center',
      dataIndex: 'idcard',
      hideInSearch: true,
      width: 110,
    },
    {
      title: '用工类型',
      align: 'center',
      dataIndex: 'jobType',
      hideInSearch: true,
      render: (text) => {
        return text!=='-' && employeeTypeList.find(e => parseInt(text) === e.value)?.label;
      }
    },
    {
      title: '员工状态',
      align: 'center',
      dataIndex: 'employeestatus',
      valueEnum: {
        0: {text: employeeStatusList[0].label, status: 'default'},
        2: {text: employeeStatusList[1].label, status: 'default'},
        3: {text: employeeStatusList[2].label, status: 'default'},
        4: {text: employeeStatusList[3].label, status: 'default'},
        5: {text: employeeStatusList[4].label, status: 'default'},
        6: {text: employeeStatusList[5].label, status: 'default'},
        7: {text: employeeStatusList[6].label, status: 'default'},
        9: {text: employeeStatusList[7].label, status: 'default'},
        10: {text: employeeStatusList[8].label, status: 'default'},
        11: {text: employeeStatusList[9].label, status: 'default'},
      },
    },
    {
      title: '职级',
      align: 'center',
      dataIndex: 'jobLevel',
      hideInSearch: true,
    },
    {
      title: '入职日期',
      align: 'center',
      dataIndex: 'hiredate',
      render: (text) => {
        return text!=='-'?moment(text).format('YYYY-MM-DD'):''
      },
      hideInSearch: true,
    },
    {
      title: '公司',
      align: 'center',
      dataIndex: 'orgName',
    },
    {
      title: '部门',
      align: 'center',
      dataIndex: 'unitName',
      hideInSearch: true,
    },
    {
      title: '岗位',
      align: 'center',
      dataIndex: 'jobName',
      hideInSearch: true,
    },
    {
      title: '社保参保状态',
      align: 'center',
      dataIndex: 'securityType',
      valueEnum: {
        0: {text: InsuredStatusList[0].label, status: 'Default'},
        1: {text: InsuredStatusList[1].label, status: 'Success'},
      },
    },
    {
      title: '承保单位',
      align: 'center',
      dataIndex: 'companyName',
      hideInSearch: true,
    },
    {
      title: '操作类型',
      dataIndex: 'type',
      valueEnum: {
        0: { text: securityOperationType[0].label},
        1: { text: securityOperationType[1].label},
      },
    },
    {
      title: '操作人工号',
      dataIndex: 'operaterCode',
      hideInSearch: true,
    },
    {
      title: '操作人姓名',
      dataIndex: 'operateName',
    },
    {
      title: '操作时间',
      dataIndex: 'operationTime',
      renderFormItem: (item, props) => {
        return <RangePicker {...props} />;
      },
      render: (text)=>{
        return text!=='-'?moment(text).format('YYYY-MM-DD HH:mm:ss'):''
      }
    },
  ];

  const exportExcel = () => {
    let searchData = formRef.current.getFieldsValue();
    let {employeestatus, orgName, securityType, type, operateName, operationTime} = searchData;
    let url ='/hr-ssc/api/api-admin/export/exportInsuranceChange?f=1';
    if (employeestatus)
      url = url + '&employeestatus='+ employeestatus;
    if (orgName)
      url = url + '&orgname='+ orgName;
    if (securityType)
      url = url + '&securityType='+ securityType;
    if (operationTime)
      url = url + '&startTime='+ moment(operationTime[0]).format('YYYY-MM-DD')
        + '&endTime='+ moment(operationTime[1]).format('YYYY-MM-DD');
    if (type)
      url = url + '&type='+ type;
    if (operateName)
      url = url + '&operateName='+ operateName;
    window.open(url)
  };

  return (
    <PageHeaderWrapper>

      <ProTable
        actionRef={actionRef}
        formRef={formRef}
        loading={loading}
        rowKey="changeId"
        request={(params) => getMemberChange(params)}
        columns={columns}
        search={{labelWidth: 'auto', defaultCollapsed: false}}
        pagination={{pageSize: 20}}
        toolBarRender={({current, pageSize},dom,domList) => [
          <Button key='export' type="primary" onClick={() => exportExcel(current,pageSize)}>导出</Button>
        ]}
      />

    </PageHeaderWrapper>
  )
};

export default connect(({  }) => ({
}))(TableList)
